<template>
  <div class="home">
    <!-- 顶部 -->
    <div class="logo">
      <img src="../../assets/images/1.jpg" alt="" width="100%" />
      <router-link class="select" to="/selectCity">{{city}}</router-link>
    </div>
    
    <!-- 病毒信息 -->
    <CovInfo :covDesc="covDesc" :news="news" />
    <!-- 疫情热点 -->
    <div class="list">
      <div>
        <router-link to="/area">
          <img src="../../assets/images/1.png" alt="" />
          <div>风险地区</div>
        </router-link>
      </div>
      <div>
        <router-link to="/hesuan">
          <img src="../../assets/images/2.png" alt="" />
          <div>核酸检测</div>
        </router-link>
      </div>
      <div>
        <router-link to="/prevention">
          <img src="../../assets/images/3.png" alt="" />
          <div>防疫物资</div>
        </router-link>
      </div>
      <div>
        <router-link to="/travel">
          <img src="../../assets/images/4.png" alt="" />
          <div>出行政策</div>
        </router-link>
      </div>
    </div>
    <!-- 数据统计 -->
    <CovNumber :covData="covData" />

    <!-- 中国地图 -->
    <ChinaMap />

    <!-- 世界地图 -->
    <WorldMap />

    <!-- 轮播图 -->
    <VueSwiper />
  </div>
</template>

<script>
// @ is an alias to /src
import CovInfo from "../Home/CovInfo/CovInfo.vue";
import api from "../../api/index";
import CovNumber from "../Home/CovInfo/CovNumber.vue";
import ChinaMap from "./VueEcharts/ChinaMap.vue";
import WorldMap from "./VueEcharts/WorldMap.vue";
import VueSwiper from "../VueSwiper/VueSwiper.vue";
export default {
  name: "Home",
  data() {
    return {
      covDesc: {},
      news: [],
      covData: {}, //全国数据统计
      city: "国内疫情"
    };
  },
  components: {
    CovInfo,
    CovNumber,
    ChinaMap,
    WorldMap,
    VueSwiper,
  },
  created() {
    //进入页面获取本地存储
    let city=localStorage.getItem("city")
    if(city){
      this.city=city+'疫情'
    }
    //请求病毒接口
    api.getCovInfo().then((res) => {
      // console.log(res.data);
      // console.log(res.data.newslist[0]);
      let data = res.data.newslist[0].desc;
      this.covDesc = {
        note1: data.note1,
        note2: data.note2,
        note3: data.note3,
        remark1: data.remark1,
        remark2: data.remark2,
        remark3: data.remark3,
      };
      // console.log(this.covDesc);
      this.news = res.data.newslist[0].news;
      // console.log(this.news);
      // 全国疫情统计
      this.covData = {
        currentConfirmedCount: data.currentConfirmedCount, //现存确诊人数
        confirmedCount: data.confirmedCount, //累计确诊人数
        suspectedCount: data.suspectedCount, //累计境外输入人数
        curedCount: data.curedCount, //累计治愈人数
        deadCount: data.deadCount, //累计死亡人数
        seriousCount: data.seriousCount, //现存无症状人数
        suspectedIncr: data.suspectedIncr, //新增境外输入人数
        currentConfirmedIncr: data.currentConfirmedIncr, //相比昨天现存确诊人数
        confirmedIncr: data.confirmedIncr, //相比昨天累计确诊人数
        curedIncr: data.curedIncr, //相比昨天新增治愈人数
        deadIncr: data.deadIncr, //相比昨天新增死亡人数
        seriousIncr: data.seriousIncr, //相比昨天现存无症状人数
        modifyTime: data.modifyTime, //截止时间
      };
    });
    /* 
      currentConfirmedCount		现存确诊人数
      confirmedCount		累计确诊人数
      suspectedCount		累计境外输入人数
      curedCount		累计治愈人数
      deadCount		累计死亡人数
      seriousCount		现存无症状人数
      suspectedIncr		新增境外输入人数
      currentConfirmedIncr		相比昨天现存确诊人数
      confirmedIncr		相比昨天累计确诊人数
      curedIncr		相比昨天新增治愈人数
      deadIncr		相比昨天新增死亡人数
      seriousIncr		相比昨天现存无症状人数
    
      modifyTime     截止时间
    */
  },
};
</script>

<style lang="less">
.logo {
  position: relative;
  .select {
    position: absolute;
    right: 0.2rem;
    top: 0.3rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.1);
    padding: 0.1rem 0.2rem;
    border-radius: 0.2rem;
  }
}
.list {
  border-top: 1px solid #000;
  display: flex;
  margin-right: 0.02rem;
  div {
    flex: 1;
  }
  img {
    width: 0.9rem;
  }
}
</style>
